<template>
  <div>
    <a-modal v-model:visible="visibleJsonDataModal1" title="JSON数据导入" ok-text="确定" cancel-text="取消" @ok="handleOk" @cancel="handleCancel">
      <a-button type="primary" @click="generateData">生成JSON数据模板</a-button>
      <a-textarea v-model:value="jsonValue" placeholder="请输入JSON格式数据" :rows="4" />
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { Ref } from 'vue';
  import { useStore } from '../pinia/pinia';
  const pinia = useStore();
  const emit = defineEmits(['jsonDataInShow']);

  const props = defineProps({
    visibleJsonDataModal: {
      type: Boolean,
    },
  });
  let visibleJsonDataModal1: Ref<boolean> = ref(false);

  watch(
    () => props.visibleJsonDataModal,
    (nvalue: boolean) => {
      console.log(nvalue);
      if (nvalue == false) {
        return;
      }
      if (nvalue) {
        visibleJsonDataModal1.value = nvalue;
      }
    },
    { deep: true },
  );
  const handleOk = () => {
    // let hh = '';
    // hh = jsonValue.value;
    // console.log(jsonValue.value, '1111');
    // console.log(JSON.parse(JSON.stringify(jsonValue.value)), '2222222222');
    // console.log(JSON.parse(jsonValue.value), '444');
    // console.log(JSON.stringify(jsonValue.value), '333333333333');
    emit('jsonDataInShow', { show: 'false', data: JSON.parse(jsonValue.value) });
    jsonValue.value = '';
    visibleJsonDataModal1.value = false;
  };
  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('jsonDataInShow', { show: 'false' });
  };
  // 随机生成数字
  let cg = () => {
    return `${Math.random() * 999}`;
  };
  let jsonValue = ref('');
  const generateData = () => {
    jsonValue.value = `{
      "codesId": "",
      "dirId": ${pinia.$state.peopleOnePageNewData.dirId},
      "portsName": ${pinia.$state.peopleOnePageNewData.portsName},
      "portsId":${cg()},
      "paramsName": "",
      "paramsPath": "",
      "paramsIsNull": "",
      "paramsType": "",
      "paramsDefault": "",
      "paramsMsg": ""
    }`;
  };
</script>
<style lang="less" scoped>
  textarea {
    margin-top: 10px;
  }
</style>
